<!-- 时间设置
8.15
彭济 -->
<template>
  <div id="SetTimeBooth">
    <el-row>
      <el-col :span="TitlespanWidth">
        <div class="div_border_title"><h2>时间设置</h2></div>
      </el-col>
    </el-row>
    <el-row style="margin-top:1em;">
      <el-col :span="22" :offset="1">
        <div class="toolbar-box">
          <el-button-group>
            <el-button icon="plus" type="primary" @click="addTime()">新增</el-button>
            <el-button icon="edit" type="primary" @click="editTime()">编辑</el-button>
            <el-button icon="delete" type="primary" @click="delTime()">删除</el-button>
          </el-button-group>
        </div>
        <el-table :data="tableData" border highlight-current-row fit @row-click="clickRow" @row-dblclick="findDetial"
                  style="width: 100%">
          <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
          <el-table-column prop="name" align="center" label="名称"></el-table-column>
          <el-table-column prop="holiday_date_start" align="center" label="开始时间"></el-table-column>
          <el-table-column prop="holiday_date_end" align="center" label="结束时间"></el-table-column>
          <el-table-column prop="memo" align="center" label="备注"></el-table-column>
          <el-table-column prop="status" align="center" :formatter="fomatterType" label="状态"></el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                       class="table-page-style"></el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="设置" :visible.sync="isEditTime" size="tiny">
      <el-form :model="timeForm" :rules="timeRules" ref="timeForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="timeForm.name" placeholder="请输入名称在1-30字"></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" prop="holiday_date_start">
          <el-date-picker v-model="timeForm.holiday_date_start" placeholder="选择日期" style="width:100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="holiday_date_end">
          <el-date-picker v-model="timeForm.holiday_date_end" placeholder="选择日期" style="width:100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="timeForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="memo">
          <el-input type="textarea" placeholder="请输入备注在1-120字" v-model="timeForm.memo" :rows="5"
                    resize="none"></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="text" @click="returnList()">取消</el-button>
          <el-button type="success" @click="checkFormData('timeForm')">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime } from '../../assets/js/common.js'

  export default {
    data () {
      var checkStartDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      var checkEndDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else if (value < this.timeForm.holiday_date_start) {
          callback(new Error('结束时间不得小于开始时间'))
        } else {
          callback()
        }
      }
      return {
        TitlespanWidth: 4,
        isEditTime: false,
        timeForm: {
          name: '',
          holiday_date_start: '',
          holiday_date_end: '',
          status: '',
          memo: '',
        },
        repalceForm: {
          name: '',
          holiday_date_start: '',
          holiday_date_end: '',
          status: '',
          memo: '',
        },
        timeRules: {
          name: [{
            required: true, min: 1, max: 32, message: '长度在1 到 32 个字', trigger: 'blur'
          }],
          holiday_date_start: [
            {validator: checkStartDate, trigger: 'change'}
          ],
          holiday_date_end: [
            {validator: checkEndDate, trigger: 'change'}
          ],
          memo: [{
            min: 1, max: 120, message: '长度在1 到 120 个字', trigger: 'blur'
          }],
        },
        tableData: [],
        currentID: '',
        currentData: {},
        page_no: 1,
        total: 0,
        saveType: '',
      }
    },
    created () {
      this.getTimeList(1)
    },
    methods: {
      fomatterType (row) {
        if (row.status === 0) {
          return '禁用'
        } else if (row.status === 1) {
          return '启用'
        }
      },
      clickRow (row, column) {
        this.currentID = row.id
        this.currentData = row
      },
      findDetial (row) {
        this.isEditTime = true
        this.currentID = row.id
        this.currentData = row
      },
      addTime () {
        this.clearObj(this.timeForm)
        this.isEditTime = true
        this.saveType = 'add'
      },
      editTime () {
        if (this.currentID !== '') {
          this.timeForm = this.currentData
          this.isEditTime = true
          this.saveType = 'edit'
        } else {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
      delTime () {
        let _this = this
        if (_this.currentID !== '') {
          _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.postDelTime()
          })
        } else {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
      checkFormData (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveForm()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })
          }
        })
      },
      saveForm () {
        switch (this.saveType) {
          case 'add':
            this.postAddTime()
            break
          case 'edit':
            this.postEditTime()
            break
        }
      },
      returnList () {
        this.isEditTime = false
        this.clearObj(this.timeForm)
      },
      postAddTime () {
        let _this = this
        let pramas = new Object()
        _this.timeForm.holiday_date_start = formatterTime('date', _this.timeForm.holiday_date_start)
        _this.timeForm.holiday_date_end = formatterTime('date', _this.timeForm.holiday_date_end)
        pramas = this.timeForm
        postDataToServer('HOLIDAY_ADD', pramas).then((data) => {
          if (data.status === 0) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.clearObj(this.timeForm)
            this.isEditTime = false
            this.getTimeList(1)
            this.saveType = ''
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      postEditTime () {
        let _this = this
        let pramas = new Object()
        _this.timeForm.holiday_date_start = formatterTime('date', _this.timeForm.holiday_date_start)
        _this.timeForm.holiday_date_end = formatterTime('date', _this.timeForm.holiday_date_end)
        pramas.id = this.currentID
        pramas.name = this.timeForm.name
        pramas.holiday_date_start = _this.timeForm.holiday_date_start
        pramas.holiday_date_end = _this.timeForm.holiday_date_end
        pramas.status = this.timeForm.status
        pramas.memo = this.timeForm.memo
        postDataToServer('HOLIDAY_EDIT', pramas).then((data) => {
          if (data.status === 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.clearObj(this.timeForm)
            this.isEditTime = false
            this.getTimeList(1)
            this.saveType = ''
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      postDelTime () {
        let _this = this
        let param = new Object()
        param.id = _this.currentID
        postDataToServer('HOLIDAY_DEL', param).then(function (data) {
          if (data.status === 0) {
            _this.$message({
              message: '删除成功',
              type: 'success'
            })
            _this.getTimeList(1)
          } else {
            _this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      getTimeList (pageNum) {
        let _this = this
        let pramas = new Object()
        pramas.page_no = pageNum
        pramas.page_size = 10
        postDataToServer('HOLIDAY_LISTPAGE', pramas).then((data) => {
          if (data.status === 0) {
            this.tableData = data.data_list
            this.total = data.total_results
          }
        })
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      clearObj (obj) {
        for (let o in obj) {
          obj[o] = ''
        }
      },
    },
    watch: {
      page_no (val, oldVal) {
        this.getTimeList(val)
      }
    }
  }
</script>
<style>
  #SetTimeBooth {
    padding: 20px;

  }
</style>
